<template>
    <div class="list">
        <Row>
            <i-col span="6" v-for="v in content" class="item">
                <Card>
                    <div style="text-align:center">
                        <img :src="v['imgUrl']+'?x-oss-process=image/resize,m_fill,h_300,w_450,limit_0'" class="articleImg">
                        <h3>{{v['title']}}</h3>
                    </div>
                </Card>
            </i-col>

        </Row>
        <div style="text-align: center;" v-if="content.length > 0">
            <Page :total="total" :current="currentPage" :page-size="pageSize" @on-change="changePage" @on-page-size-change='changePageSize' show-sizer />
        </div>
    </div>
</template>

<script>
    import {article} from "../lib/interface";
    import view from "../lib/view";

    export default {
        name: "list",
        data () {
            return {
                content: [],
                pageSize: 20,
                currentPage: 1,
                total: 0,
                id: 0
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            this.getList();
        },
        methods: {
            async getList(){
                let param = {'category': this.id,'page':this.currentPage,'pageCount':this.pageSize};
                view.showLoad();
                let result = await article(param);
                view.hideLoad();
                if(result.status === 1){
                    this.content = result.data.data;
                    this.total = result.data.total;
                }else{
                    this.content = [];
                }

            },
            changePage(page){
                this.currentPage = page;
                this.getList();
            },
            changePageSize(size){
                this.pageSize = size;
                this.getList();
            }

        },
        //监听
        watch: {
            $route(){
                this.id = this.$route.query.id;
                this.getList();
            }
        }

        }
</script>

<style scoped>
    .item{
        padding: 10px;
    }
    .articleImg{
        width: 100%;
    }

</style>